<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="hAdd"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column label="序号" width="120" type="index" />
              <el-table-column label="角色名称" width="240" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template #default="{row}">
                  <el-button size="small" type="success" @click="hAssignPer(row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="hEdit(row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="hDel(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.page"
                :page-sizes="[2,3,5,10,20]"
                :page-size="queryParams.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <!-- 新增角色的对话框 -->
      <el-dialog title="新增角色" :visible.sync="showDialog" @close="hResetForm">
        <el-form :model="roleForm" ref="roleForm" :rules="rules" label-width="100px">
          
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="roleForm.name"/>
          </el-form-item>

          <el-form-item label="角色描述" prop="description">
            <el-input v-model="roleForm.description"/> 
          </el-form-item>

        </el-form>
        <!-- 底部 -->
        <el-row slot="footer" type="">
            <el-col :span="6">
          <el-button size="samll">取 消</el-button>
          <el-button size="small" type="primary" @click="hSubmit">确 定</el-button>
            </el-col>
        </el-row>
      </el-dialog>

      <!-- 给角色分配权限 -->
      <el-dialog title="分配权限" :visible.sync="showDialogPer">
        <assignPermission :id="curId" @close="showDialogPer=false"/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRolesList,addRolesList,updateRolesList,delRolesList } from "@/api/setting";
import assignPermission from './assignPermission.vue'
export default {
  components:{
    assignPermission
  },
  data() {
    return {
        curId:'',//保存角色的id
        showDialogPer:false,
        isEdit:false,//false 新增  true 编辑
        //收集的数据对象
        roleForm:{
            name:'',
            description:''
        },
        // 验证规则对象
        rules:{
            name:[
                {required:true,message:'请输入角色的名称',trigger:'blur'}
            ],
            description:[
                {required:true,message:'请输入角色的描述',trigger:'blur'}
            ]
        },
      showDialog: false,
      queryParams: {
        page: 1,
        pagesize: 2
      },
      list: [], //存储角色的列表
      total: 0 //保存角色的总数
    };
  },
  created() {
    this.loadRolesList();
  },
  methods: {
    hAssignPer(id){
      this.curId=id
      this.showDialogPer=true
    },
    // 重置表单
    //resetFields 清空校验规则
    hResetForm(){
      this.$refs.roleForm.resetFields()

      this.roleForm={
        name:'',
        description:''
      }
    },
    // 删除
    hDel(id){
      this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await delRolesList(id)
          //如果第三页数据为1条，删除后，后台接收并返回的是第三页的空数据
          // 此时页面会显示到第二页（显示第三页面的空数据）
          if (this.list.length===1) {
            this.queryParams.page--
            if (this.queryParams.page<=0) {
              this.queryParams.page=1
            }
          }
          this.loadRolesList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 新增操作
    hAdd(){
        this.isEdit=false
        this.showDialog=true
    },
    // 编辑操作
    hEdit(data){
        this.isEdit=true
        // 因为this.roleForm进行了表单的双向绑定，那么表单中的数据改变，this.foleForm也会发生改变
        // 而this.roleForm和传进来的data，所以导致表单的数据改变，表格中的数据跟着改变
        // 解决的办法：使用浅拷贝 
        this.roleForm={...data}
        this.showDialog=true
    },
    //实现新增角色
    async doAdd(){
        try {
            const res= await addRolesList(this.roleForm)

            this.total++

            //将queryParams.page 改变到最后一页，再发送重新渲染
            //计算最大页码值 
            const maxPage= Math.ceil(this.total/this.queryParams.pagesize)
            this.queryParams.page=maxPage
            // 重新渲染数据
            this.loadRolesList()
            // 关闭弹层
            this.showDialog=false
            
        } catch (error) {
            console.log(error);
        }
    },
    // 实现编辑角色
    async doEdit(){
        try {
            await updateRolesList(this.roleForm)
            this.loadRolesList()
            this.showDialog=false
        } catch (error) {
            console.log(error);
        }
    },
    hSubmit(){
        this.$refs.roleForm.validate(async valid=>{
            if(!valid) return

            this.isEdit ? this.doEdit() : this.doAdd()
        })
    },
    // 当每页显示条数进行切换时触发 val==>每页显示的条数
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      //1.改变queryParams.pagesize 每页显示的条数
      this.queryParams.page = 1;
      this.queryParams.pagesize = val;
    },
    // 当前页的页码值进行切换时触发 val 页码值
    handleCurrentChange(val) {
      console.log(`当前页：${val}`);
      //改变queryParams.page页码值
      this.queryParams.page = val;
      // 重新发送请求,重新获取数据
      this.loadRolesList();
    },
    // 加载角色列表
    async loadRolesList() {
      try {
        const res = await getRolesList(this.queryParams);
        console.log("getRolesList", res);
        this.list = res.data.rows;
        this.total = res.data.total;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>